<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>事件冒泡： | 一只老鸟</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/img/rty-docs.ico">
    <script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-145250139-1"></script>
    <script>window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-145250139-1');</script>
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?96bef00c01d8ee7ee249abc380b9e5ab";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <meta name="description" content="Welcome to my docs">
    <meta name="keywords" content="jkx,晋凯旋,jkxxmd,vue,js,html,css,英文歌曲,bruno">
    
    <link rel="preload" href="/assets/css/0.styles.eb327ba5.css" as="style"><link rel="preload" href="/assets/js/app.2b0e3d52.js" as="script"><link rel="preload" href="/assets/js/2.87232f21.js" as="script"><link rel="preload" href="/assets/js/66.82d4fd2e.js" as="script"><link rel="prefetch" href="/assets/js/10.1e2b3af9.js"><link rel="prefetch" href="/assets/js/11.bfd5eea1.js"><link rel="prefetch" href="/assets/js/12.11b2a8d0.js"><link rel="prefetch" href="/assets/js/13.d230b1b6.js"><link rel="prefetch" href="/assets/js/14.8208356f.js"><link rel="prefetch" href="/assets/js/15.badc1e67.js"><link rel="prefetch" href="/assets/js/16.76e6aeba.js"><link rel="prefetch" href="/assets/js/17.ea4ddef2.js"><link rel="prefetch" href="/assets/js/18.e3d36bd1.js"><link rel="prefetch" href="/assets/js/19.aa1bac84.js"><link rel="prefetch" href="/assets/js/20.838765cd.js"><link rel="prefetch" href="/assets/js/21.14466225.js"><link rel="prefetch" href="/assets/js/22.38392bba.js"><link rel="prefetch" href="/assets/js/23.71895fbc.js"><link rel="prefetch" href="/assets/js/24.766c8a49.js"><link rel="prefetch" href="/assets/js/25.6b02ff9f.js"><link rel="prefetch" href="/assets/js/26.ef22337a.js"><link rel="prefetch" href="/assets/js/27.0334ed21.js"><link rel="prefetch" href="/assets/js/28.811fb438.js"><link rel="prefetch" href="/assets/js/29.f687b8ad.js"><link rel="prefetch" href="/assets/js/3.3fc78177.js"><link rel="prefetch" href="/assets/js/30.0eef1a68.js"><link rel="prefetch" href="/assets/js/31.44dad2fc.js"><link rel="prefetch" href="/assets/js/32.959ca33d.js"><link rel="prefetch" href="/assets/js/33.d27370cb.js"><link rel="prefetch" href="/assets/js/34.73319d5f.js"><link rel="prefetch" href="/assets/js/35.09513538.js"><link rel="prefetch" href="/assets/js/36.c77663c8.js"><link rel="prefetch" href="/assets/js/37.89852ede.js"><link rel="prefetch" href="/assets/js/38.a9026d97.js"><link rel="prefetch" href="/assets/js/39.2cb07eac.js"><link rel="prefetch" href="/assets/js/4.50419328.js"><link rel="prefetch" href="/assets/js/40.7694c8be.js"><link rel="prefetch" href="/assets/js/41.0b071795.js"><link rel="prefetch" href="/assets/js/42.731a77fd.js"><link rel="prefetch" href="/assets/js/43.e340c04a.js"><link rel="prefetch" href="/assets/js/44.32723933.js"><link rel="prefetch" href="/assets/js/45.fddbc294.js"><link rel="prefetch" href="/assets/js/46.7227ca9a.js"><link rel="prefetch" href="/assets/js/47.e445b894.js"><link rel="prefetch" href="/assets/js/48.22f08eaa.js"><link rel="prefetch" href="/assets/js/49.1ee7be95.js"><link rel="prefetch" href="/assets/js/5.f4c7dd9b.js"><link rel="prefetch" href="/assets/js/50.620525ff.js"><link rel="prefetch" href="/assets/js/51.23ef9c37.js"><link rel="prefetch" href="/assets/js/52.ab599220.js"><link rel="prefetch" href="/assets/js/53.6f0a5a12.js"><link rel="prefetch" href="/assets/js/54.0af9ce80.js"><link rel="prefetch" href="/assets/js/55.9a619ce4.js"><link rel="prefetch" href="/assets/js/56.d3eb58e2.js"><link rel="prefetch" href="/assets/js/57.cec694aa.js"><link rel="prefetch" href="/assets/js/58.215ff512.js"><link rel="prefetch" href="/assets/js/59.67b4a2d9.js"><link rel="prefetch" href="/assets/js/6.35564b30.js"><link rel="prefetch" href="/assets/js/60.10fa328d.js"><link rel="prefetch" href="/assets/js/61.eb384a7b.js"><link rel="prefetch" href="/assets/js/62.21995735.js"><link rel="prefetch" href="/assets/js/63.d3376937.js"><link rel="prefetch" href="/assets/js/64.9dc17e46.js"><link rel="prefetch" href="/assets/js/65.faaf4be5.js"><link rel="prefetch" href="/assets/js/67.766e8bbb.js"><link rel="prefetch" href="/assets/js/68.e00a5e5f.js"><link rel="prefetch" href="/assets/js/69.0f9198d3.js"><link rel="prefetch" href="/assets/js/7.826495ef.js"><link rel="prefetch" href="/assets/js/70.05ef2cdd.js"><link rel="prefetch" href="/assets/js/71.0da0e95b.js"><link rel="prefetch" href="/assets/js/72.fd1cda42.js"><link rel="prefetch" href="/assets/js/73.907aa3c6.js"><link rel="prefetch" href="/assets/js/74.dec02a91.js"><link rel="prefetch" href="/assets/js/75.8610ce53.js"><link rel="prefetch" href="/assets/js/76.db9000c6.js"><link rel="prefetch" href="/assets/js/77.fa0311a2.js"><link rel="prefetch" href="/assets/js/78.33ae2bd0.js"><link rel="prefetch" href="/assets/js/79.879fa638.js"><link rel="prefetch" href="/assets/js/8.7a30ba0c.js"><link rel="prefetch" href="/assets/js/80.898b981f.js"><link rel="prefetch" href="/assets/js/81.b606e1f8.js"><link rel="prefetch" href="/assets/js/82.5006eb1e.js"><link rel="prefetch" href="/assets/js/83.604f41d2.js"><link rel="prefetch" href="/assets/js/84.2e649063.js"><link rel="prefetch" href="/assets/js/85.50f34442.js"><link rel="prefetch" href="/assets/js/86.aee7b865.js"><link rel="prefetch" href="/assets/js/87.9b812977.js"><link rel="prefetch" href="/assets/js/88.52e08a6c.js"><link rel="prefetch" href="/assets/js/9.7b6af510.js">
    <link rel="stylesheet" href="/assets/css/0.styles.eb327ba5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">一只老鸟</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/english/introduction.html" class="sidebar-link">导读</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>2019十二月(December)</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/english/2019/2019-December/What Is a Calorie.html" class="sidebar-link">对象：{ }</a></li><li><a href="/english/2019/2019-December/Why Is Water so Important.html" class="sidebar-link">水为何如此重要</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>2019十一月(November)</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/english/2019/2019-November/The Paradox of Our Time.html" class="active sidebar-link">事件冒泡：</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2019/2019-November/The Paradox of Our Time.html#事件冒泡" class="sidebar-link">事件冒泡：</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2019/2019-November/The Paradox of Our Time.html#阻止事件冒泡-还可以用事件监听-第三个参数设置。" class="sidebar-link">阻止事件冒泡 还可以用事件监听 第三个参数设置。</a></li><li class="sidebar-sub-header"><a href="/english/2019/2019-November/The Paradox of Our Time.html#阻止默认事件的方法" class="sidebar-link">阻止默认事件的方法</a></li><li class="sidebar-sub-header"><a href="/english/2019/2019-November/The Paradox of Our Time.html#事件流-冒泡、目标、捕获" class="sidebar-link">事件流：冒泡、目标、捕获</a></li></ul></li><li class="sidebar-sub-header"><a href="/english/2019/2019-November/The Paradox of Our Time.html#事件委托" class="sidebar-link">事件委托</a></li></ul></li><li><a href="/english/2019/2019-November/The Story of LIfe.html" class="sidebar-link">生命的故事</a></li><li><a href="/english/2019/2019-November/The Time Bank.html" class="sidebar-link">时间银行</a></li><li><a href="/english/2019/2019-November/What Will Matter.html" class="sidebar-link">什么才是重要的</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019十月(October)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019九月(September)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019八月(August)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019七月(July)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019六月(June)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年五月(May)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年四月(April)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年三月(March)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年二月(Feburary)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年一月(January)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2018年十二月(December)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2018年十一月(November)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2018年十月(October)</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="事件冒泡"><a href="#事件冒泡" class="header-anchor">#</a> 事件冒泡：</h2> <p>从内层触发事件的元素开始，向外层传递事件，在传递过程中，相
同事件会被触发，一层接
着一层。
addEventListener(event,function(e){
e.target.tagName==&quot;大写&quot;
e.target(触发事件的元素)
})</p> <h3 id="阻止事件冒泡-还可以用事件监听-第三个参数设置。"><a href="#阻止事件冒泡-还可以用事件监听-第三个参数设置。" class="header-anchor">#</a> 阻止事件冒泡 还可以用事件监听 第三个参数设置。</h3> <p>e.stopPropagation( )
要注意：用函数查询节点 查到的是一个类数组 ， 要用类数组
【0】查找到 里面的
IE中方法是window.event.cancelBubble =
true</p> <h3 id="阻止默认事件的方法"><a href="#阻止默认事件的方法" class="header-anchor">#</a> 阻止默认事件的方法</h3> <p>阻止事件默认行为： e.preventDefault（）
IE中方法是 window.event.returnValue =
false
return false方法组织事件冒泡和默认行为 最后加 return
false</p> <h3 id="事件流-冒泡、目标、捕获"><a href="#事件流-冒泡、目标、捕获" class="header-anchor">#</a> 事件流：冒泡、目标、捕获</h3> <p>跟绑定事件的代码顺序没有关系。
看最大的哪个父级 他要是捕获先触发它
他要是冒泡的就触发里面
通过事件冒泡进去到目标阶段</p> <h2 id="事件委托"><a href="#事件委托" class="header-anchor">#</a> 事件委托</h2> <p>事件委托：要绑定事件的元素多，避免遍历操作；解决了新添加的
元素事件的绑定问题
原理： 事件冒泡 触发内层时候外侧也被触发 将内侧触发事
件委托为其父级
优点：避免通过遍历集合方式注册事件。
可以为新添加的元素注册事件。
计时器：
time=setInterval(function(){small()},1000);
setInterval(function（）{} , 时间毫秒 ) 计时器 不加控
制一直运行下去。
停止计时器 ： clearInterval(计时器ID{上面式子的time})
1.setTimeout和setInterval都属于JS中的定时器，可以规定延迟时间再
执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了，
而setInterval则可以一直循环下去。
setTimeout(function（）{},事件毫秒)。
无论是setTimeout还是setInterval，在使用函数名作为调用句柄
时不能带参数，使用字符串调用时可以带参数。例如：
setTimeout(‘fun(name)’,1000);
getComputedStyle( document.getElementById(&quot;xx&quot;）.width
)；获取XX的长度。
computed 计算i
获取计算样式
.后面跟着是属性名 没有该属性 用【】
chrome滚动条像素17px;body里面padding是8像素
firefox,safira 游览器
内容就是css 设置的宽度
clientWidth： 是内边距+内容
offsetWidth： 是内边距+内容+边框；
scrollWidth： 里面内容所占的空间+padding 其中宽度是加一
变的padding; 高度则加2个padding
offsetLeft： 元素左边框到浏览器边界的距离，有定
位设置的时候就是相对于父元素的距离，如果父级也有定位，还得看
他父级的位置 智能读取数值 不能设置
scrollTop：没有滚动条就是0 有滚动条就是看不见的地方的距
离
document.documentElement.scrollTop 获取滚动条当前距离顶
部的距离
window.scrollTo(x,y)窗口转到距离左边x 顶部Y的位置
BFC：浏览器的怪异模式 上下间距叠加 取最大值 就是
body默认内边距是8 一个div maring-top:10 结果 上下叠加 就是
10；
mouseover： 鼠标移入元素触发 包括子元
素。
mouseout: 鼠标移出元素出发 包括子
元素；
mouseenter:
mouseleave: 鼠标移出元素出发 不包括子
元素；
mousedown: 鼠标按下
mousemove： 鼠标移动
mouseup： 鼠标松开
event:
target，id，className，e.stopPropagation，
e.preventDefault
e.clientX,e.clientY 相对于窗口位置
e.pageX,e.pageY 相对于文档位置
父级加 user-select:none不让选其中的文字
onfocus： 获取焦点时触发 就是光标所在的位置 可以设
置打开页面获得焦点
onblur: 失去焦点 失去焦点时执行的东西
onchange： 改变值得时候触发 在input中 必须失去焦点 检
测值是否发生变化才触发
在下拉框中 select:在选择不同于当前选项中才触
发
上面3个事件 不存在事件冒泡
递归：
函数内部调用自身，递归要有终止条件
滚动条
1、用a链接实现回到指定id的a标签（锚点）
缺点：
--地址栏加了hash #
--速度控制不了
--多余标签
--跳转到的地方，可能要给多余的a标签设
置位置
好处：
--不用计算位置
2、js实现跳转指定位置
window.scrollTo(x,y)【斯克肉吐】
window.scrollTo({left:x,top:y,behavior:&quot;&quot;})
【碧海威尔】
--behavior:auto【自动】/instant【瞬间，默
认】/smooth【平滑】
3、smooth【司木思】：页面长的情况下，消耗时间
太长
设置控制滚动的函数，可以调整速度
--当前滚动位置：
document.documentElement.scrollTop
--需要跳转的位置：offsetTop</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/jgsrty/jgsrty.github.docs/edit/master/docs/english/2019/2019-November/The Paradox of Our Time.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/23/2020, 4:59:13 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/english/2019/2019-December/Why Is Water so Important.html" class="prev">
        水为何如此重要
      </a></span> <span class="next"><a href="/english/2019/2019-November/The Story of LIfe.html">
        生命的故事
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.2b0e3d52.js" defer></script><script src="/assets/js/2.87232f21.js" defer></script><script src="/assets/js/66.82d4fd2e.js" defer></script>
  </body>
</html>
